<template>
  <div class="wrapper-ques">
    <!-- 标签 -->
    <div v-if="showTags && tags.length" class="wrapper-ques-hd">
      <template v-for="tag in tags" :key="tag">
        <wd-tag mark v-if="tag">{{ tag }}</wd-tag>
      </template>
    </div>
    <div class="wrapper-ques-bd">
      <span v-show="order" class="ques-order">{{ order }}. </span>
      <div class="ques-content">
        <Choice v-if="type === '单选题'" v-model="modelValue"  v-bind="attrs" />
        <MultChoice v-else-if="type === '多选题'" v-model="modelValue" v-bind="attrs" />
        <Blank v-else-if="type === '填空题'" v-model="modelValue" v-bind="attrs" />
        <Judge v-else-if="type === '判断题'" v-model="modelValue" v-bind="attrs" />

        <div v-else> 不支持解析此题型: {{ type }} </div>
      </div>
    </div>
    <div v-if="showAnalysis" class="wrapper-ques-ft">
      <view class="ques-answer">
        <view>
          <label>正确答案：</label>
          <span>{{ answer }}</span>
        </view>
      </view>
      <view class="ques-analysis">
        <view class="ques-analysis-item">
          <text>解析：</text>
          <wd-text :text="analysis"></wd-text>
        </view>
        <div class="ques-analysis-item">
          <text v-for="item in metaData" :key="item.label" style="display: block;">
            <text>{{ item.label }}：</text>
            <wd-text :text="item.value"></wd-text>
          </text>
        </div>
      </view>
    </div>
  </div>
</template>

<script setup name="WrapperQuestion">
import Judge from "./judge.vue";
import Blank from "./blank.vue";
import Choice from "./choice.vue";
import MultChoice from "./mult-choice.vue";

const props = defineProps({
  modelValue: {
    required: true,
  },
  order: {
    type: Number,
    required: true,
  },
  type: {
    type: String,
    required: true,
  },
  showTags: {
    type: Boolean,
    default: false,
  },
  tags: {
    type: Array,
    required: true,
    default: () => [],
  },
  title: {
    type: String,
    required: true,
  },
  options: {
    type: Array,
    required: true,
    default: () => [],
  },
  answer: {
    type: [String, Object, Number], // 根据你实际的答案类型
    required: true,
  },
  // 回显正确答案
  showTrueAnswer: {
    type: Boolean,
    default: false,
  },
  analysis: {
    type: String,
  },
  showAnalysis: {
    type: Boolean,
    default: false,
  },
  metaData: {
    type: Array,
    default: () => [],
  },
});

const modelValue = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  },
});

const emit = defineEmits(["update:modelValue"]);

const attrs = computed(() => {
  return {
    title: props.title,
    options: props.options,
    answer: props.answer,
    showTrueAnswer: props.showTrueAnswer,
  };
});

</script>

<style lang="scss" scoped>

</style>
